<template>
	<view class="page">
			<!-- 轮播图 statrt-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
			<swiper-item v-for="carousel in carouselList">
				<image 
				:src="carousel.img" 
				class="carousel"></image>
			</swiper-item>
			<!-- <swiper-item>
				<image src="../../static/carousel/batmanvssuperman.png" class="carousel"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/spiderman.png" class="carousel"></image>
			</swiper-item> -->
		</swiper>
		<!-- <text>{{carouselList.image}}</text> -->
		
		
		<!-- 中间 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">
					即将上映
				</view>
			</view>
			</view>
			
			<scroll-view scroll-x="true" class="page-block hot">
				<view class="single-poster" v-for="nlis in nlist">
					<view class="poster-wapper" >
						<image :src="nlis.img" class="poster"></image>
						<view class="movie-name">
							{{nlis.nm}}
						</view>
						<trailerStars :innerScore="nlis.score" showNum="1"></trailerStars>
						<!-- <view class="movie-score-wapper"> -->
							<!-- <image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-gray.png" class="star-ico"></image> -->
						<!-- <view class="movie-score"> -->
							<!-- {{nlis.comingTitle}} -->
						<!-- </view> -->
						<!-- </view> -->
					</view>
				</view>
	
			</scroll-view>
			
			
			<!-- 视频 -->
			<view class="page-block  super-hot">
				<view class="hot-title-wapper">
					<image src="../../static/icos/interest.png" class="hot-ico"></image>
					<view class="hot-title">
						热门预告
					</view>
				</view>
			</view>
			
			<view class="hot-movies page-block">
				<video 
				v-for="trailer in hotTrailerList"
				
				:src="trailer.url"
				 @play="meIsPlaying"
				 :poster="trailer.poster"
				 class="hot-movie-single"
				 controls>
				 </video>
			</view>
			
			
				<!-- 猜你喜欢 start -->
				<view class="page-block super-hot">
					<view class="hot-title-wapper">
						<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
						<view class="hot-title">
							猜你喜欢
						</view>
					</view>
				</view>
				
			<view class="page-block guess-u-like" v-for="(guesslist,gIndex) in guessulike">
				
					<view class="single-like-movie">
						<image  :src="guesslist.img" class="like-movie"></image>
						<view class="movie-desc">
							<view class="movie-title">
								{{guesslist.nm}}
							</view>
							<trailerStars :innerScore="guesslist.sc" showNum="1"></trailerStars>
							
							<view class="movie-info">
								{{guesslist.star}}
							</view>
							<view class="movie-info">
								{{guesslist.version}}
							</view>
							<view class="movie-info">
								{{guesslist.showInfo}}
							</view>
						</view>
						
						<view class="movie-oper" :data-gIndex="gIndex" @click="praiseMe">
							<image src="../../static/icos/praise.png" class="praise-ico"></image>
							<view class="praise-me">
								点赞
							</view>
							<view :animation="animationDataArr[gIndex]" class="praise-me animation-opacity">
								+1
							</view>
						</view>
					</view>
				
				
				
				
			</view>
			
			
			
			
		</view>
		</view>
	</view>
</template>

<script>
	// import common from "../../common/common.js"
	import trailerStars from "../../components/trailerStars.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				carouselList: [],
				nlist: [],
				hotTrailerList: [],
				animationData: {},
				animationDataArr: [
					{},{},{},{},{}
				],
				guessulike: [],
				}
		},
		
		onLoad() {
			var me = this;
			// var serverUrl = common.serverUrl;
			
			// #ifdef APP-PLUS || MP-WEIXIN
			// 在页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation();
			// #endif
			
			var serverUrl = me.serverUrl;
			// 轮播图
			uni.request({
				// url: serverUrl + '/swiper',
				url: serverUrl + '/swiper',
				method: 'GET',
				success: (res) => {
					// console.log(res);
					// debugger;
					var carouselList = res.data.swiper;
					me.carouselList = carouselList;
					// console.log(carouselList);
				
				}
				
			});
			
			
			
			// 预告片
			uni.request({
				url:  serverUrl + '/mostExpected',
				method: 'GET',
				
				success: res => {
				var nlist = res.data.coming;
					// debugger;
				me.nlist = nlist;
				// console.log(res);
			
				},
				fail: () => {},
				complete: () => {}
			});
			
			// 视频
			uni.request({
				url: serverUrl + '/video',
				method: 'GET',
				success: res => {
					var hotTrailerList = res.data.data.data;
					me.hotTrailerList = hotTrailerList;
					// console.log(this.hotTrailerList);
				},
				fail: () => {},
				complete: () => {}
			});
			
			
			
			// 动画
			this.animation = uni.createAnimation();
			
			me.refresh();
			
		},
		onUnload() {
			this.animationData = {};
			this.animationDataArr = [
				{}, {}, {}, {}, {}
			];
		},
		onPullDownRefresh() {
			this.refresh();
		},
		onHide() {
			if (this.videoContext) {
				this.videoContext.pause();
			}
		},
		methods: {
			meIsPlaying(e) {
				var me = this;
				var trailerId = "";
				if (e) {
					trailerId = e.currentTarget.dataset.playingindex;
					me.videoContext = uni.createVideoContext(trailerId);
				}
				var hotTrailerList = me.hotTrailerList;
				for (var i = 0; i < hotTrailerList.length ; i ++) {
					var tempId = hotTrailerList[i].id;
					if (tempId != trailerId) {
						uni.createVideoContext(tempId).pause();
					}
				}
			},
			refresh(){
				var me = this;
				
				uni.showLoading({
					mask: true
				});
				uni.showNavigationBarLoading();
				
				var serverUrl = me.serverUrl;
				// 猜你喜欢
				uni.request({
					url: serverUrl + "/index/guessULike",
					method: 'GET',
					
					success: res => {
					var guessulike = res.data.data;
						// debugger;
					me.guessulike = guessulike;
					// console.log(guessulike);
				
					},
					fail: () => {},
					complete: () => {
							uni.hideNavigationBarLoading();
							uni.hideLoading();
							uni.stopPullDownRefresh();
						}
					
				});
				
				
			},
			// 点赞动画
			praiseMe(e) {
				// #ifdef APP-PLUS || MP-WEIXIN
				var gIndex = e.currentTarget.dataset.gindex;
				console.log(gIndex);
				// return;
				// 构建动画数据，并且通过step来表示这组动画的完成
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				
				// 导出动画数据到view组件，实现组件的动画效果
				// this.animationData = this.animation.export();
				this.animationData = this.animation;
				this.animationDataArr[gIndex] = this.animationData.export();
			
				// 还原动画
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}.bind(this), 500)
				// #endif
			}
		},
		components:{
			trailerStars
		}
	}
</script>

<style>
	@import url("index.css");
</style>
